<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-04-16 16:45:54
-->
<template>
  <continer>
    <template slot="content">
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :model="formData"
        size="mini"
        :rules="rules"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="放音类型" prop="playType">
          <el-select v-model="formData.playType" placeholder="请选择放音类型">
            <el-option label="语音库" value="voiceLibrary"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="语音文件" prop="voice">
          <div style="display: flex">
            <m7Select
              size="mini"
              v-model="formData.voice"
              :placeholder="'请选择语音文件'"
              filterable
              :multiple="false"
              :collapse-tags="false"
              :options="voiceLibraryList"
              :remote="true"
              :defaultProps="{ label: 'name', value: '_id' }"
              clearable
            >
            </m7Select>
            <AudioProgress
              ref="audioProgressRef"
              class="audioProgress"
              :row="currentVoice"
              :showDowload="false"
              :showListen="true"
              type="common"
              :url="currentVoice.fileUrl"
              v-if="currentVoice.fileUrl"
            ></AudioProgress>
          </div>
        </el-form-item>
        <el-form-item prop="replayTimes">
            <span slot="label">
                重播次数
               <el-tooltip class="item" effect="dark" content="话术录音最多重复播放的次数，到达次数后客户未正确响应则挂机，次数为2则播放3次，默认为2" placement="top">
                  <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
               </el-tooltip>
            </span>
          <el-input v-model="formData.replayTimes" size="mini">
            <template slot="append">次</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="replayInterval">
          <span slot="label">
              重播间隔
             <el-tooltip class="item" effect="dark" content="语音播放重复间隔的时间，到达间隔时间后客户未正确响应则重播，最小时间为1秒，建议最大时间不超过5秒" placement="top">
                <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
             </el-tooltip>
          </span>
          <el-input v-model="formData.replayInterval" size="mini">
            <template slot="append">秒</template>
          </el-input>
        </el-form-item>
        <div
          class="select-group"
          v-for="(item, index) in condition"
          :key="index"
        >
          <div class="select-box small-box">
            <el-form-item :label="'按键'" prop="region">
              <el-select
                v-model="item.value"
                placeholder="请选择按键"
                @change="selectChange(item.value, index)"
                clearable
              >
                <el-option
                  v-for="(key, index) in filterKeyList"
                  :label="key.value"
                  :value="key.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="select-box">
            <el-form-item :label="'节点'">
              <el-select
                v-model="item.to"
                placeholder="请选择下一步节点"
                clearable
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="(node, index) in nodeList"
                  :label="node.data.name"
                  :value="node.id"
                  v-show="!node.viewOnly && node.id !== currentData.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="select-oprate">
            <span @click="deleteCondition(item, index)"
              ><i class="V7_iconfont V7_iconV7tubiao-109 delete-span"></i
            ></span>
          </div>
        </div>
        <div class="addCondition">
          <span @click="addCondition"
            ><i class="V7_iconfont V7_iconV7tubiao_xinzeng add-span"></i
            >增加条件</span
          >
        </div>
      </el-form>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template slot="remove">
      <el-button @click="deleteNode" type="danger" size="mini">删除</el-button>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import nodeEidtMixins from './nodeEidtMixins'
import remoteSelect from '@/components/configCommon/operate-modules/remoteSearch/index.vue'
@Component({
  name: 'ivr-node-menu',
  components: { continer, remoteSelect }
})
export default class extends Mixins(nodeEidtMixins) {
  private remoteUrl = '/call/action/ivr/voiceLibrary/query'
  private keyList = [
    {
      name: '按键1',
      value: '1'
    },
    {
      name: '按键2',
      value: '2'
    },
    {
      name: '按键3',
      value: '3'
    },
    {
      name: '按键4',
      value: '4'
    },
    {
      name: '按键5',
      value: '5'
    },
    {
      name: '按键6',
      value: '6'
    },
    {
      name: '按键7',
      value: '7'
    },
    {
      name: '按键8',
      value: '8'
    },
    {
      name: '按键9',
      value: '9'
    },
    {
      name: '按键0',
      value: '0'
    },
    {
      name: '按键#',
      value: '#'
    },
    {
      name: '按键*',
      value: '*'
    }
  ]

  private pagingData: any = {
    limit: 10,
    page: 1
  }

  private query = {}
  private selectChange (id, index) {
    this.setConditionName(this.keyList, index, 'value', id)
  }

  private get filterKeyList () {
    return this.keyList.filter((item) => {
      let cur = false
      this.condition.some((conItem) => {
        if (item.value === conItem.value) {
          cur = true
          return true
        }
      })
      return !cur
    })
  }

  private setConditionName (dataList, conditionIndex, datakey, value) {
    let setname = ''
    dataList.some((item) => {
      if (item[datakey] === value) {
        setname = item.name
        return true
      }
    })
    this.condition[conditionIndex].label = setname
  }

  private addCondition () {
    this.condition.push({
      label: '',
      value: '',
      to: ''
    })
  }
}
</script>
<style lang="stylus" scoped>
  .audioProgress
    margin 0 10px 0
</style>
<style lang="stylus" scoped>
.select-oprate
  span
    padding-top 36px
    display block
    color $icon-gray
    cursor pointer
.addCondition
  display flex
  align-items center
  color $c-main
  cursor pointer
  margin-bottom 15px
  i
    font-size 12px
.delete-span
  &:hover
    color $c-danger
.add-span
  &:before
    margin-right 4px
.tip-span
  color $icon-gray
  font-size 12px
  cursor pointer
</style>
